<template>
	<view class="px-2">
		<view class="rounded-xl mt-2 overflow-hidden">
			<button
				open-type="chooseAvatar"
				@chooseavatar="chooseavatar"
				type="default"
				class="button2view"
				hover-class="bg-primary-op10"
				hover-start-time="0"
				hover-stay-time="0"
			>
				<c-list-item title="头像" :border="false">
					<template #suffix>
						<view class="mr-1-3">
							<c-img :src="userInfo.avatarUrl" :width="68" :height="68" />
						</view>
					</template>
				</c-list-item>
			</button>
			<c-list-item title="昵称" :border="false" :tip="userInfo.nickName" @touch="showNicknameDialog" />
			<!-- <picker mode="selector" @change="genderChange" :value="genderValue" :range="genderArr">
				<c-list-item title="性别" :border="false" :tip="getGenderText(userInfo.gender)" />
			</picker>
			<picker mode="date" :value="birthdayValue" :end="birthdayEnd" @change="birthdayChange">
				<c-list-item title="生日" :border="false" :tip="userInfo.birthday" />
			</picker> -->
		</view>
		<view class="rounded-xl mt-2">
			<!-- <c-list-item title="注册时间" :border="false" :tip="userInfo.gmtCreate || '--'" :hideArrow="true" /> -->
			<!-- <c-list-item title="Uwant账号" :border="false" :tip="userInfo.account || '--'" :hideArrow="true" /> -->
			<c-list-item title="手机号" :border="false" :tip="userInfo.mobile" :hideArrow="true" />
		</view>
		<view class="rounded-xl mt-8"> <c-list-item title="退出登录" :border="false" @touch='handleLogout'/> </view>
		<c-message-dialog type="prompt" ref="nicknameMesDialogRef" inputType="nickname" />
		<c-message-dialog ref='logoutConfirmRef'></c-message-dialog>
	</view>
</template>

<script>
import { ref, watch } from 'vue';
import authCache from '@/uni-sdk/utils/authCache.js';
import common from '@/base/common.js';
import { Api } from "@/base/api/common.js";
import { updateMember } from '@/base/api/login.js';
import { getAuthHeader } from '@/uni-sdk/request/request.js';
import dateUtil from '@/uni-sdk/utils/date.js';

export default {
	onLoad() {
		const c = this.getOpenerEventChannel();
		c.on('data', (data) => {
			if (data) {
				this.reloadMeUserInfo = data.reloadUserInfo;
				this.userInfo = data.userInfo;
			}
		});
	},
	setup() {
		/**
		 * common
		 */
		const userInfo = ref({});
		const reloadMeUserInfo = ref(() => {});
		async function reloadUserInfo() {
			const newInfo = await reloadMeUserInfo.value(false);
			userInfo.value = newInfo || {};
			getApp().globalData.toast('更新成功');
		}
		/**
		 * avatar
		 */
		async function chooseavatar(e) {
			//e.detail.avatarUrl
			uni.showLoading({
				title: '上传中...',
				mask: true,
			});
			const resp = await uni.uploadFile({
				url: common.baseUrl + Api.upload,
				filePath: e.detail.avatarUrl,
				name: 'file',
				header: getAuthHeader(),
			});
			uni.hideLoading();
			console.log("==========>uploadFile", resp);
			if (resp) {
				const data = JSON.parse(resp.data);
				if (data.code === '00000') {
					const re = await updateMember({
						id: userInfo.value.id,
						avatarUrl: data.data.url,
					});
					if(re) {
						reloadUserInfo();
					}
				}
			}
		}
		/**
		 * nickname
		 */
		const nicknameMesDialogRef = ref();
		function showNicknameDialog() {
			nicknameMesDialogRef.value.setOptions({
				placeholder: '请输入昵称',
				ok(newNickname) {
					if (!newNickname) {
						getApp().globalData.toast('请输入昵称');
						return false;
					}
					// console.log("========>newNickname", newNickname);
					handleUpdateNickname(newNickname);
				},
			});
		}
		async function handleUpdateNickname(newNickname) {
			const re = await updateMember({
				id: userInfo.value.id,
				nickName: newNickname,
			});
			if (re) {
				reloadUserInfo();
			}
		}
		/**
		 * gender
		 */
		const genderArr = ref(['男', '女']);
		const genderValue = ref(0);
		async function genderChange(e) {
			// genderValue.value = e.detail.value;
			const value = +e.detail.value;
			if (value === -1) return;
			const re = await updateProfile({
				gender: value === 0 ? 1 : 2,
			});
			if (re) {
				reloadUserInfo();
			}
		}
		function getGenderText(gender) {
			if (gender === 1) {
				genderValue.value = 0;
				return '男';
			}
			if (gender === 2) {
				genderValue.value = 1;
				return '女';
			}
			genderValue.value = -1;
			return '未知';
		}
		/**
		 * birthday
		 */
		const birthdayValue = ref('');
		const birthdayEnd = ref(dateUtil.format(new Date()));
		async function birthdayChange(e) {
			const value = e.detail.value;
			if (!value) return;
			const re = await updateProfile({
				birthday: value,
			});
			if (re) {
				reloadUserInfo();
			}
		}
		watch(
			userInfo,
			(info) => {
				birthdayValue.value = info.birthday || '';
			},
			{
				immediate: true,
			}
		);
		/**
		 * logout
		 */
		const logoutConfirmRef = ref();
		function handleLogout(){
			logoutConfirmRef.value.setOptions({
				content: "确认退出登录吗？",
				async ok(){
					authCache.clear();
					uni.reLaunch({
						url: "/pages/login/login"
					});
					// const re = await logout();
					// if(re){
					// 	reloadMeUserInfo.value(true);
					// 	authCache.clear();
					// 	uni.navigateBack();
					// }
				}
			});
		}
		return {
			userInfo,
			getGenderText,
			chooseavatar,
			reloadMeUserInfo,
			nicknameMesDialogRef,
			showNicknameDialog,
			genderArr,
			genderValue,
			genderChange,
			birthdayValue,
			birthdayEnd,
			birthdayChange,
			handleLogout,
			logoutConfirmRef,
		};
	},
};
</script>

<style lang="scss">
.button2view {
	font-size: 0;
	padding: 0;
	border: none;
	display: block;
	text-align: left;
	line-height: 1;
	border-radius: 0;
	background-color: #FDF6E5 !important;
}
.button2view::after {
	content: '';
	display: none;
}
</style>